
document.querySelector('.skip-login').addEventListener('click', skipPage)


// 用户信息本地存储
let userMessage = JSON.parse(localStorage.getItem('user')) || []
// 关键字
let userK = 0
let passwdK = 0
let passwdAgK = 0
let yzmK = 0
// 跳转函数
function skipPage() {
  window.location.href = 'login.html'
}

// 查看密码
// 密码
document.querySelector('.passwd i').addEventListener('click', function () {
  let inputType = document.querySelector('.passwd input')
  inputType.type === 'password' ? (inputType.type = 'text', this.classList.toggle('icon-yanjing_yincang_o'), this.classList.add('icon-yanjing_xianshi_o')) : (inputType.type = 'password', this.classList.toggle('icon-yanjing_xianshi_o'), this.classList.add('icon-yanjing_yincang_o'))
})
// 确认密码
document.querySelector('.passwd-again i').addEventListener('click', function () {
  let inputType = document.querySelector('.passwd-again input')
  inputType.type === 'password' ? (inputType.type = 'text', this.classList.toggle('icon-yanjing_yincang_o'), this.classList.add('icon-yanjing_xianshi_o')) : (inputType.type = 'password', this.classList.toggle('icon-yanjing_xianshi_o'), this.classList.add('icon-yanjing_yincang_o'))
})

// 验证码
// 页面打开或刷新执行随机数函数
window.onload = function () {
  let num = yzm1()
  document.querySelector('.register-box-yzm .yzm').innerHTML = num
}
// 点击执行随机数函数
document.querySelector('.register-box-yzm .yzm').addEventListener('click', function () {
  let num = yzm1()
  this.innerHTML = num
})

// 验证码验证
// 随机数函数
function yzm1() {
  const yzmcs = 'qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM1234567890'
  let yzm = ''
  for (let i = 0; i < 4; i++) {
    let random = Math.floor(Math.random() * yzmcs.length)
    yzm += yzmcs[random]
  }
  return yzm
}
// 失去焦点
let that = ''
document.querySelector('.register-box-yzm input').addEventListener('blur', function () {
  yzmYz()
})
//输入
document.querySelector('.register-box-yzm input').addEventListener('input', function () {
  yzmYz()
})

// 验证码验证函数
function yzmYz() {
  let divYzm = document.querySelector('.register-box-yzm .yzm')
  let num = divYzm.innerText.toLowerCase()
  let yzm = document.querySelector('.register-box-yzm input')
  if (yzm.value === '') {
    addWarn(yzm, '验证码为空')
    yzmK = 0
  } else {
    if (yzm.value === num || yzm.value === divYzm.innerText) {
      removeWarn(yzm)
      yzmK = 1
    } else if (!(yzm.value === num || yzm.value === divYzm.innerText)) {
      addWarn(yzm, '验证码错误')
      yzmK = 0
    }
  }

}
//用户名验证函数
let userReg = /.{3,}/
function userYz(userValue) {
  return userReg.test(userValue)
}
// 失去焦点
document.querySelector('.user input').addEventListener('blur', function () {
  if (this.value === '') {
    addWarn(this, '用户名为空')
    userK = 0
  } else {
    if (!userYz(this.value)) {
      addWarn(this, '用户名格式错误')
      userK = 0
    } else {
      removeWarn(this)
      userK = 1
    }
  }

})

// 密码验证函数
let passwdReg = /.{6,}/
function passwdYz(passwdValue) {
  return passwdReg.test(passwdValue)
}
// 失去焦点
document.querySelector('.passwd input').addEventListener('blur', function () {
  if (this.value === '') {
    addWarn(this, '密码为空')
    passwdK = 0
  } else {
    if (!passwdYz(this.value)) {
      addWarn(this, '密码格式错误')
      passwdK = 0
    } else {
      removeWarn(this)
      passwdK = 1
    }
  }
})

// 确认密码验证
// 失去焦点
document.querySelector('.passwd-again input').addEventListener('blur', function () {
  let passwd = document.querySelector('.passwd input')
  if (!(this.value === passwd.value)) {
    addWarn(this, '密码不相同')
    passwdAgK = 0
  } else {
    removeWarn(this)
    passwdAgK = 1
  }
})

// 条例勾选
// 点击注册
document.querySelector('.register-box-login .click-register').addEventListener('click', function () {
  let tlInpt = document.querySelector('.tl input')
  if (tlInpt.checked === false) {
    alert('请认真阅读条例')
  }

  fromYz()
  yzmYz()

  // 所有表单信息填完无误后，进行本地存储
  let user = document.querySelector('.user input')
  let passwd = document.querySelector('.passwd input')
  if (userK === 1 && passwdK === 1 && passwdAgK === 1 && yzmK === 1) {
    // 本地存储之前做个判断,循环本地数据，并判断身份是什么
    enrollUser(user.value, passwd.value)
  }
})

// 添加警告函数
function addWarn(inp, error) {
  const lab = inp.nextElementSibling
  const p = lab.nextElementSibling
  p.textContent = error
  p.classList.add('red')
  inp.classList.add('color')
}
// 移除警告函数
function removeWarn(inp) {
  const lab = inp.nextElementSibling
  const p = lab.nextElementSibling
  p.classList.remove('red')
  inp.classList.remove('color')
  p.innerHTML = ''
}

// 表单验证函数
function fromYz() {
  let user = document.querySelector('.user input')
  let passwd = document.querySelector('.passwd input')
  let passwdAg = document.querySelector('.passwd-again input')
  let yzm = document.querySelector('.register-box-yzm input')
  if (user.value === '') {
    addWarn(user, '请输入用户名')
  } else {
    removeWarn(user)
  }
  if (passwd.value === '') {
    addWarn(passwd, '请输入密码')
  } else {
    removeWarn(passwd)
  }
  if (passwdAg.value === '') {
    addWarn(passwdAg, '请输入密码')
  } else if (!(passwd.value === passwdAg.value)) {
    addWarn(passwdAg, '两次密码不同')
  } else {
    removeWarn(passwdAg)
  }
  if (yzm.value === '') {
    addWarn(yzm, '请输入验证码')
  } else {
    removeWarn(yzm)
  }

}



// 注册函数
function enrollUser(username, password) {
  let user = document.querySelector('.user input')
  let passwd = document.querySelector('.passwd input')
  let passwdAg = document.querySelector('.passwd-again input')
  let yzm = document.querySelector('.register-box-yzm input')
  let root = document.querySelector('.icon .root')
  let stu = document.querySelector('.icon .stu')
  // 声明两个变量分别代表数据是否存在
  let usernameExists = false
  // 遍历arr数组
  for (let messgae of userMessage) {
    // 如果用户名存在就将它的值变为true
    if (messgae.username === username) {
      usernameExists = true
      break
    }
  }
  // 如果数据存在就执行下面的代码
  if (usernameExists) {
    userK = 0
    alert('注册的用户已存在')
    user.value = ''
    passwd.value = ''
    passwdAg.value = ''
    yzm.value = ''
    let num = yzm1()
    document.querySelector('.register-box-yzm .yzm').innerHTML = num
  } else {
    // 如果不存在就作为新值条件到数组
    if (root.checked) {
      let obj = {
        username,
        password,
        userType: '管理员'
      }
      userMessage.push(obj)
    } else if (stu.checked) {
      let obj = {
        username,
        password,
        userType: '学生'
      }
      userMessage.push(obj)
    }
    localStorage.setItem('user', JSON.stringify(userMessage))
    // 注册成功改变message的值
    alert('注册成功')
    skipPage()
  }
}

// 主题颜色
function colorSx() {
  let colors = localStorage.getItem('color')
  document.documentElement.style.setProperty('--themeColor', colors)
}
colorSx()